<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 800px;
      height: 400px;
    }
  </style>
  <script src="./js/echarts.min.js"></script>

</head>

<body>
  <div class="box">

  </div>
  <script>
    var ROOT_PATH = 'https://echarts.apache.org/examples';
    const myChart = echarts.init(document.querySelector('.box'))
    // const option = {
    //   tooltip: {
    //     trigger: 'item'
    //   },
    //   legend: {
    //     top: '5%',
    //     left: 'center'
    //   },
    //   series: [
    //     {
    //       name: 'Access From',
    //       type: 'pie',
    //       radius: ['40%', '70%'],
    //       avoidLabelOverlap: false,
    //       itemStyle: {
    //         borderRadius: 10,
    //         borderColor: '#fff',
    //         borderWidth: 2
    //       },
    //       label: {
    //         show: false,
    //         position: 'center'
    //       },
    //       emphasis: {
    //         label: {
    //           show: true,
    //           fontSize: 40,
    //           fontWeight: 'bold'
    //         }
    //       },
    //       labelLine: {
    //         show: false
    //       },
    //       data: [
    //         { value: 1048, name: 'xp' },
    //         { value: 735, name: 'lwj' },
    //         { value: 580, name: 'lzt' },
    //         { value: 484, name: 'xzh' },
    //         { value: 300, name: 'chl' },
    //         { value: 1000, name: 'xxx' },
    //       ]
    //     }
    //   ]
    // }
    const option = {
      title: {
        text: 'Referer of a Website',
        subtext: 'Fake Data',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    // const option = {
    //   backgroundColor: '#000',
    //   globe: {
    //     baseTexture: ROOT_PATH + '/data-gl/asset/earth.jpg',
    //     shading: 'lambert',
    //     environment: ROOT_PATH + '/data-gl/asset/starfield.jpg',
    //     atmosphere: {
    //       show: true
    //     },
    //     light: {
    //       ambient: {
    //         intensity: 0.1
    //       },
    //       main: {
    //         intensity: 1.5
    //       }
    //     }
    //   },
    //   series: []
    // };
    myChart.setOption(option)
  </script>
</body>

</html>